<template>
  <button
    class="mt-button reset-button"
    :class="{
      'mt-button_primary': type === 'primary',
      'mt-button_info': type === 'info',
      'mt-button_circle': shape === 'circle',
      'mt-button_mini': size === 'mini',
      'mt-button_plain': plain,
      'mt-button_disabled': disabled
    }"
    :disabled="disabled"
    :open-type="openType"
    @click="handleClick"
  >
    <slot>按钮</slot>
  </button>
</template>

<script setup>
import { debounce } from '@/utils/tools';

const props = defineProps({
  type: {
    // 按钮样式类型 primary | info
    type: String,
    default: 'primary'
  },
  shape: {
    // 按钮形状 square | circle
    type: String,
    default: 'square'
  },
  size: {
    // 按钮大小 normal | mini
    type: String,
    default: 'normal'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  plain: {
    // 是否镂空
    type: Boolean,
    default: false
  },
  openType: {
    // 开放能力
    type: String,
    default: ''
  },
  shake: {
    // 是否开启防抖
    type: Boolean,
    default: true
  },
  times: {
    // 防抖时间
    type: Number,
    default: 500
  }
});

const emits = defineEmits(['click']);

const handleClick = debounce(
  function () {
    emits('click');
  },
  props.shake ? props.times : 10
);
</script>

<style lang="scss" scoped>
.mt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  min-width: 200rpx;
  font-size: 32rpx;
  line-height: 1;
  padding: 22rpx 30rpx;
  border-radius: 8rpx;
  border: 2rpx solid transparent;
  box-sizing: border-box;
  &::after {
    content: '';
    width: 0;
    height: 0;
    border: none;
  }
  &.mt-button_mini {
    min-width: 110rpx;
    font-size: 28rpx;
    padding: 10rpx 24rpx;
  }
  &.mt-button_disabled {
    opacity: 0.5;
  }
  &.mt-button_circle {
    border-radius: 400rpx;
  }
  &.mt-button_info {
    color: #727687;
    border: 2rpx solid #e6e6e6;
    background: #ffffff;
  }
  &.mt-button_primary {
    color: #ffffff;
    background-color: $mt-color-primary;
    &.mt-button_plain {
      color: $mt-color-primary;
      border: 2rpx solid $mt-color-primary;
      background-color: #ffffff;
    }
  }
}
</style>
